<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒精代谢时间计算器</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: white;
        }
        
        .container {
            max-width: 400px;
            margin: 40px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: white;
        }
        
        h1 {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin: 15px 0 5px;
            font-size: 16px;
            font-weight: bold;
        }
        
        input[type="number"], input[type="text"], select {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
        }
        
        button {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            line-height: 1.6;
        }
        
        .result p {
            margin: 8px 0;
        }
        
        .image-display {
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            text-align: center;
        }
        
        .image-display img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>酒精代谢时间计算器</h1>
        <form id="alcoholCalculator">
            <label for="gender">性别：</label>
            <select id="gender" name="gender" required>
                <option value="male">男性</option>
                <option value="female">女性</option>
            </select>
            
            <label for="age">年龄：</label>
            <input type="number" id="age" name="age" placeholder="例如：30" required>
            
            <label for="weight">体重（公斤）：</label>
            <input type="number" id="weight" name="weight" placeholder="例如：70" required>
            
            <label for="volume">饮酒量（两）：</label>
            <input type="number" id="volume" name="volume" placeholder="例如：4" required>
            
            <label for="alcoholContent">酒精度数（%）：</label>
            <input type="number" id="alcoholContent" name="alcoholContent" placeholder="例如：53" required>
            
            <button type="button" onclick="calculate()">计算代谢时间</button>
        </form>
        <div class="result" id="result"></div>
    </div>
    
    <div class="image-display">
        <img src="tian.jpg" alt="展示图片" />
    </div>

    <script>
        function calculate() {
            const volume = parseFloat(document.getElementById('volume').value); // 饮酒量（两）
            const alcoholContent = parseFloat(document.getElementById('alcoholContent').value); // 酒精度数（%）
            const weight = parseFloat(document.getElementById('weight').value); // 体重（公斤）
            const gender = document.getElementById('gender').value; // 性别
            const age = parseFloat(document.getElementById('age').value); // 年龄

            // 将饮酒量从“两”换算成毫升（1两 = 50毫升）
            const volumeInMl = volume * 50;

            // 计算酒精摄入量（克）
            const alcoholIntake = volumeInMl * (alcoholContent / 100) * 0.8;

            // 基础代谢速率（克/小时）
            let baseMetabolismRate = 7;

            // 根据性别调整代谢速率
            if (gender === 'female') {
                baseMetabolismRate *= 0.8; // 女性代谢速度慢20%
            }

            // 根据年龄调整代谢速率
            const ageFactor = Math.max(0, (age - 25) / 10 * 0.05); // 每10年代谢速率下降5%
            baseMetabolismRate *= (1 - ageFactor);

            // 计算基础代谢时间（小时）
            const baseMetabolismTime = alcoholIntake / baseMetabolismRate;

            // 输出结果
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = `
                <p><strong>饮酒量：</strong>${volume} 两（${volumeInMl} 毫升）</p>
                <p><strong>酒精摄入量：</strong>${alcoholIntake.toFixed(2)} 克</p>
                <p><strong>基础代谢时间：</strong>${baseMetabolismTime.toFixed(2)} 小时</p>
                <p><strong>建议等待时间：</strong>${(baseMetabolismTime * 1.5).toFixed(2)} 小时</p>
                <p>结果仅供参考，请勿酒后驾驶。</p>
            `;
        }
    </script>
</body>
</html>